<template>
  <div>
    <div class="center">
      <!--      我的简历-->
      <div class="personal-info">
        <div class="info-item info1 br bb">
          <div class="avatar-wrap head"><label class="avatar" for="avatar-file"
          ><img
            src="https://sxsimg.xiaoyuanzhao.com/edu/user_default.png">
            <div class="avatar-upload"></div>
          </label> <input id="avatar-file" style="display:none;" type="file">
            <div class="el-dialog__wrapper" style="display:none;">
              <div aria-label="dialog" aria-modal="true" class="el-dialog" role="dialog"
                   style="margin-top:15vh;width:500px;">
                <div class="el-dialog__header"><span class="el-dialog__title"></span>
                  <button aria-label="Close" class="el-dialog__headerbtn" type="button"><i
                    class="el-dialog__close el-icon el-icon-close"></i></button>
                </div><!---->
                <div class="el-dialog__footer">
                  <div>
                    <button class="el-button el-button--default el-button--small" type="button">
                      <!----><!----><span>取消</span></button>
                    <button class="el-button el-button--primary el-button--small" type="button">
                      <!----><!----><span>顺时针旋转</span></button>
                    <button class="el-button el-button--primary el-button--small" type="button">
                      <!----><!----><span>逆时针旋转</span></button>
                    <button class="el-button el-button--primary el-button--small" type="button">
                      <!----><!----><span>确定</span></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="name"></div>
          <div class="phonenumber">15577004807</div>
          <div class="link-options"><a
            class="change-password" href="https://www.shixiseng.com/user/accountsetting/mod?jump=password"
          >修改密码</a> <a class="account-bind" href="https://www.shixiseng.com/user/accountsetting/mod"
          >账号绑定</a></div>
        </div>
        <div class="info-item info2 bb">
          <div class="title-box"><span class="title"><span
          >我的简历</span></span> <span class="complete-resume-btn cursor"
                                    @click="handleToTab('resume')"
          > 完善简历 &gt; </span></div>
          <div class="content-box">
            <div>
              <div class="resume resume--online">
                <div class="resume__header">
                  <div class="resume__title">在线简历</div>
                  <div class="resume__edit">编辑</div>
                </div>
                <div class="resume__body">
                  <div class="progress">
                    <div class="progress__bar-wrap">
                      <div class="progress__bar" style="width: 0%;"></div>
                    </div>
                    <div class="progress__text">0分</div>
                  </div>
                </div>
                <div class="resume__footer">
                  更新于1天前
                </div>
              </div>
            </div>
            <div>
              <div class="resume resume--resource">
                <div class="resume__header">
                  <div class="resume__title">附件简历</div>
                </div>
                <p class="tip">前往上传属于你的附件简历吧～</p></div>
            </div>
            <div class="resume">
              <div class="info3-box"><a class="my-delivery"
                                        href="https://resume.shixiseng.com/my/delivered">
                <div class="num">0</div>
                <span>我的投递<i style="display:none;"></i></span></a> <a
                class="my-collect" href="https://resume.shixiseng.com/my/collect">
                <div class="num">0</div>
                <span>我的收藏
                  </span></a></div>
            </div>
          </div>
        </div>
        <div class="info-item info3 br">
          <div class="calendar-today">
            <div class="calendar-title">今日大事件</div>
            <div class="calendar-more">更多 &gt;</div>
          </div>
          <div class="calendar-wrap">
            <div class="calendar-left">
              <div class="calendar-month">September</div>
              <div class="calendar-day">12</div>
            </div>
            <div class="calendar-right">
              <div class="calendar-item"><img
                alt=""
                class="calendar-icon"
                src="">
                <span
                  class="calendar-text">迈瑞医疗2024届校园招聘空中宣讲会
 </span></div>
              <div class="calendar-item"><img
                alt=""
                class="calendar-icon"
                src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icontag2.029e35b.png">
                <span
                  class="calendar-text">得物2024届秋季校园招聘空中宣讲会 </span>
              </div>
              <div class="calendar-item"><img
                alt=""
                class="calendar-icon"
                src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icontag3.26f05cb.png">
                <span
                  class="calendar-text">2024高瓴联合校招——未来能源专场 </span>
              </div>
            </div>
          </div>
        </div>
        <div class="info-item info4">
          <div class="title-box clearfix"><span class="title f-l">求职意向</span> <a
            class="edit-btn f-r" href="javascript:void(0)">编辑</a></div>
          <div class="info-list">
            <div class="list-item"><span class="item-name">求职性质：</span> <span
            >
              未填写
            </span></div>
            <div class="list-item"><span class="item-name">期望行业：</span> <span
              title="不限">
              不限
            </span></div>
            <div class="list-item"><span class="item-name">期望职位：</span> <span
            >后端开发</span></div>
            <div class="list-item"><span class="item-name">期望城市：</span> <span
            >广州</span></div>
          </div>
        </div>
        <div class="info-item info5">
          <div class="title-box clearfix"><span class="title f-l">求职状态</span> <a
            class="edit-btn f-r" href="javascript:void(0)">编辑</a></div>
          <div class="info-list">
            <div class="list-item"><span class="item-name">实习时长：</span> <span
            >未填写</span></div>
            <div class="list-item"><span class="item-name">实习天数：</span> <span
            >5天/周</span></div>
            <div class="list-item"><span class="item-name">到岗日期：</span> <span
            >未填写</span></div>
          </div>
        </div>
      </div>
      <!--      推荐职位-->
      <div class="recommend-job">
        <div class="recommend-job__header">
          <div class="header__left">
            <div class="recommend-job__title">推荐职位</div>
            <div class="recommend-job__caption">
              推荐职位是根据你的浏览，投递等行为以及简历内容计算给出，简历越详细推荐越准确哦～
            </div>
          </div>
          <div class="header__right"><a class="recommend-job__more"
                                        href="https://www.shixiseng.com/recommend/interns">更多推荐&gt;</a>
          </div>
        </div>
        <div class="recommend-job__list">
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_9emiexe99v5n"
                                        target="_blank">软件开发工程师(Android）</a> <!----> <span
                  class="job__wage">250-300元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">5天/周</span> <span
                  class="job__duration">8个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">网证通</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">互联网/游戏/软件</span>
                  /
                  <span class="company__size">500-2000人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/3C/8C/3C5894610545A1B356DCAB2C42DD9D8C.png"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_ckqakqe4e05l"
                                        target="_blank">JAVA实习生</a> <!----> <span
                  class="job__wage">100-100元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">3天/周</span> <span
                  class="job__duration">3个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">宝凯道融（立白金控）</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">金融/经济/投资/财会</span>
                  /
                  <span class="company__size">50-150人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/D9/15/D948D6CC0A1DA78A59670A8818CEAD15.png"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_cqequgiwohh7"
                                        target="_blank">KOL达人博主运营实习生</a> <!----> <span
                  class="job__wage">100-180元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">2天/周</span> <span
                  class="job__duration">10个月</span>
                </div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">花姐伴你</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">餐饮/酒店/旅游/娱乐</span>
                  /
                  <span class="company__size">少于15人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/EA/E1/EA0D190F69D72337DBF2CF47DBE50BE1.jpg"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_fjmt4t8uoleb"
                                        target="_blank">后端开发实习生</a> <!----> <span
                  class="job__wage">120-180元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">5天/周</span> <span
                  class="job__duration">6个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">南方数码</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">互联网/游戏/软件</span>
                  /
                  <span class="company__size">500-2000人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://hr-resources.shixiseng.com/20230705/581b05580f6447f7bf942c238e00486e.png"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_fk9gdsosxb2o"
                                        target="_blank">联邦规格化实习生</a> <!----> <span
                  class="job__wage">150-200元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">4天/周</span> <span
                  class="job__duration">3个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">树根互联</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">互联网/游戏/软件</span>
                  /
                  <span class="company__size">500-2000人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/company_log/2022-06-16/acbf48fced2211ec84ec32f153892d37.png"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_myn7kzod3tou"
                                        target="_blank">后端实习生</a> <!----> <span
                  class="job__wage">100-150元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">5天/周</span> <span
                  class="job__duration">3个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">永哲信息</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">企业服务/咨询</span>
                  /
                  <span class="company__size">15-50人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/FC/C1/FCE4EE9AEB88AD2F7A2A160B6E6EC9C1.png"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_q8v3nbuzk7iv"
                                        target="_blank">IT实习生</a> <!----> <span
                  class="job__wage">80-100元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">5天/周</span> <span
                  class="job__duration">6个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">珂瑞玛创意</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">广告/传媒/公关/展览</span>
                  /
                  <span class="company__size">15-50人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/company_log/2022-05-06/803863daccf811ec81d492855453b3eb.png"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_r1vwhdagdk3h"
                                        target="_blank">软件开发工程师（Java Web）</a> <!---->
                  <span class="job__wage">150-180元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">5天/周</span> <span
                  class="job__duration">8个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">网证通</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">互联网/游戏/软件</span>
                  /
                  <span class="company__size">500-2000人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/3C/8C/3C5894610545A1B356DCAB2C42DD9D8C.png"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_wvudrcv1waio"
                                        target="_blank">软件研发储干</a> <!----> <span
                  class="job__wage">200-400元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">5天/周</span> <span
                  class="job__duration">3个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">itc</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span
                  class="company__classification">不限</span>
                  /
                  <span class="company__size">2000人以上</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/company_log/2021-01-14/7b3988da560911eba822f6ecfe74f268.png"></a>
            </div>
          </div>
          <div class="recommend-job__detail-wrap">
            <div class="recommend-job__detail">
              <div class="job">
                <div class="primary"><a class="job__name ellipsis"
                                        href="https://www.shixiseng.com/intern/inn_zui4rxqyfui4"
                                        target="_blank">后端开发</a> <!----> <span
                  class="job__wage">100-180元/天</span></div>
                <div class="secondary"><span class="job__location">广州</span> <span
                  class="job__days-per-week">5天/周</span> <span
                  class="job__duration">5个月</span></div>
              </div>
              <div class="company">
                <div class="primary"><a class="company__name ellipsis"
                                        href="javascript:">花姐伴你</a> <img

                  class="company__label"
                  src="https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon-hyrz.9e296c9.png" style="display: none;"></div>
                <div class="secondary"><span class="company__classification">餐饮/酒店/旅游/娱乐</span>
                  /
                  <span class="company__size">少于15人</span></div>
              </div>
              <a class="logo-wrap" href="javascript:"><img
                alt="logo"
                class="company__logo" src="https://sxsimg.xiaoyuanzhao.com/EA/E1/EA0D190F69D72337DBF2CF47DBE50BE1.jpg"></a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
/* eslint-disable  */
// 个人中心
export default {
  name: 'personal-center',
  data() {
    return {

    }
  },
  methods:{
    handleToTab(rname){
      this.$router.push({name:rname})
    }
  }
}
</script>
<style scoped>

.center {
  width: 1080px;
  margin: 0 auto
}
.resume-popover {
  padding: 0;
  width: 328px
}

.resume-popover .media {
  padding: 23px 20px 30px;
  display: flex;
  align-items: center
}

.resume-popover .media__left {
  flex: 0 0 40px;
  height: 50px
}

.resume-popover .media__body {
  margin-left: 13px;
  flex: 1 1
}

.resume-popover .media__header {
  width: 243px;
  font-size: 18px;
  color: #252527;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.resume-popover .media__content {
  font-size: 12px;
  line-height: 16px;
  color: #A0A0A2;
  margin-top: 8px
}

.resume-popover .media__object {
  background: url(https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/pdf.8b66485.png) center/contain no-repeat;
  height: 100%
}

.resume-popover .popover-footer {
  padding: 16px 25px;
  text-align: right;
  border-top: 1px solid #e8e8ea
}

.resume-popover .popover-footer .el-button--text {
  padding: 0;
  color: #A0A0A2
}

.personal-info {
  background-color: #fff;
  margin-top: 17px;
  letter-spacing: 0;
  font-size: 0
}

.personal-info .info-item {
  height: 184px;
  display: inline-block;
  vertical-align: top;
  color: #252527;
  box-sizing: border-box;
  position: relative
}

.personal-info .info1, .personal-info .info3 {
  width: 360px
}

.personal-info .calendar-today {
  margin: 17px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.personal-info .calendar-today .calendar-title {
  font-size: 16px;
  font-weight: 400;
  color: #252527;
  line-height: 22px
}

.personal-info .calendar-today .calendar-more {
  font-size: 14px;
  font-weight: 400;
  color: #6aa2e4;
  line-height: 20px;
  cursor: pointer
}

.personal-info .calendar-wrap {
  box-sizing: border-box;
  padding: 0 32px;
  justify-content: space-between;
  display: flex;
  margin-top: 4px
}

.personal-info .calendar-wrap .calendar-left {
  width: 83px;
  height: 99px;
  background: url(https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/icon_calendar_small.cdf214f.png) no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin-right: 12px;
  display: flex;
  flex-shrink: 0;
  flex-direction: column
}

.personal-info .calendar-wrap .calendar-left .calendar-month {
  padding-top: 30px;
  font-size: 10px;
  transform: scale(0.83333);
  font-weight: 400;
  color: #899bbc;
  line-height: 14px;
  text-align: center
}

.personal-info .calendar-wrap .calendar-left .calendar-day {
  margin-top: 2px;
  font-size: 32px;
  font-weight: bold;
  color: #1c3d79;
  line-height: 32px;
  text-align: center
}

.personal-info .calendar-wrap .calendar-right {
  box-sizing: border-box;
  width: 200px
}

.personal-info .calendar-wrap .calendar-right .calendar-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 16px
}

.personal-info .calendar-wrap .calendar-right .calendar-item .calendar-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px
}

.personal-info .calendar-wrap .calendar-right .calendar-item .calendar-text {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color: #4c5c4e;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.personal-info .calendar-wrap .calendar-right .nodata {
  font-size: 14px;
  font-weight: 400;
  color: #c0c0c1;
  text-align: center;
  line-height: 82px
}

.personal-info .info2 {
  width: 720px
}

.personal-info .info4, .personal-info .info5 {
  width: 359px
}

.personal-info .info5 {
  border-left: 1px dashed #e8e8ea
}

.personal-info .info1 {
  padding: 48px 0 0 144px
}

.personal-info .info1 .head {
  position: absolute;
  top: 48px;
  left: 32px
}

.personal-info .info1 .name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
  line-height: 31px
}

.personal-info .info1 .phonenumber {
  font-size: 18px;
  line-height: 24px;
  margin: 10px 0 14px
}

.personal-info .info1 .link-options {
  font-size: 14px;
  line-height: 19px
}

.personal-info .info1 .link-options > a {
  display: inline-block;
  padding-left: 21px;
  color: #cdcdcf;
  background: left center/16px no-repeat
}

.personal-info .info1 .link-options .change-password {
  background-image: url(https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/change-password-icon.52d6038.png)
}

.personal-info .info1 .link-options .account-bind {
  background-image: url();
  margin-left: 18px
}

.personal-info .info2 {
  padding: 24px 32px
}

.personal-info .info2 .title-box {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.personal-info .info2 .title {
  font-size: 18px;
  color: #252527
}

.personal-info .info2 .title .tip {
  margin-left: 10px;
  font-size: 12px;
  color: #a0a0a2
}

.personal-info .info2 .title .c-blue {
  color: #6AA2E4;
  cursor: pointer;
  text-decoration: underline
}

.personal-info .info2 .complete-resume-btn {
  font-size: 14px;
  color: #6AA2E4
}

.personal-info .info2 .content-box {
  margin-top: 16px;
  display: flex;
  justify-content: space-between
}

.personal-info .info2 .content-box .resume {
  box-sizing: border-box;
  flex-grow: 0;
  width: 202px;
  height: 96px;
  background-color: #F8F8FA;
  padding: 16px 12px 0 12px;
  cursor: pointer
}

.personal-info .info2 .content-box .resume__header {
  font-size: 14px;
  display: flex;
  justify-content: space-between
}

.personal-info .info2 .content-box .resume__edit {
  color: #A0A0A2
}

.personal-info .info2 .content-box .resume__title {
  color: #4C4C4E
}

.personal-info .info2 .content-box .resume__body {
  margin-top: 8px;
  font-size: 12px
}

.personal-info .info2 .content-box .resume__footer {
  margin-top: 8px;
  font-size: 12px;
  color: #CDCDCF
}

.personal-info .info2 .content-box .resume--online .progress {
  display: flex;
  line-height: 13px;
  justify-content: space-between;
  align-items: center
}

.personal-info .info2 .content-box .resume--online .progress__bar-wrap {
  flex: 0 0 140px;
  height: 8px;
  background-color: #ebeef5;
  border-radius: 100px
}

.personal-info .info2 .content-box .resume--online .progress__bar {
  background-color: #6AA2E4;
  border-radius: 100px;
  height: 100%
}

.personal-info .info2 .content-box .resume--online .progress__text {
  font-size: 12px;
  color: #4C4C4E
}

.personal-info .info2 .content-box .resume--online .resume__body {
  margin-top: 10px
}

.personal-info .info2 .content-box .resume--online .resume__footer {
  margin-top: 11px
}

.personal-info .info2 .content-box .resume--resource .resume__body {
  color: #A0A0A2
}

.personal-info .info2 .content-box .resume--resource .resume__body .icon-htmal5icon21 {
  float: right
}

.personal-info .info2 .content-box .resume--resource .resume__body .word-icon {
  display: inline-block;
  font-size: 12px
}

.personal-info .info2 .content-box .resume .tip {
  margin-top: 5px;
  color: #a0a0a2;
  font-size: 12px;
  line-height: 20px
}

.personal-info .info3-box {
  display: flex;
  justify-content: space-around;
  text-align: center
}

.personal-info .info3-box .num {
  color: #4C4C4E;
  font-size: 24px;
  line-height: 31px
}

.personal-info .info3-box span {
  display: block;
  color: #a0a0a2;
  font-size: 14px;
  line-height: 19px;
  margin-top: 16px;
  position: relative
}

.personal-info .info3-box span i {
  width: 6px;
  height: 6px;
  position: absolute;
  top: -1px;
  right: -7px;
  background-color: #f24724;
  border-radius: 3px
}

.personal-info .info4, .personal-info .info5 {
  padding: 24px 32px 0 32px;
  font-size: 14px
}

.personal-info .info4 .title-box, .personal-info .info5 .title-box {
  font-size: 18px;
  line-height: 24px
}

.personal-info .info4 .title-box .edit-btn, .personal-info .info5 .title-box .edit-btn {
  color: #6AA2E4;
  font-size: 14px
}

.personal-info .info4 .info-list .list-item, .personal-info .info5 .info-list .list-item {
  padding-right: 20px;
  line-height: 19px;
  margin-top: 12px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.personal-info .info4 .info-list .list-item span, .personal-info .info5 .info-list .list-item span {
  color: #4C4C4E
}

.personal-info .info4 .info-list .list-item .item-name, .personal-info .info5 .info-list .list-item .item-name {
  color: #a0a0a2
}

.personal-info .bb {
  border-bottom: 1px dashed #e8e8ea
}

.personal-info .br {
  border-right: 1px dashed #e8e8ea
}

.recommend-job {
  margin-top: 17px;
  background-color: #fff
}

.recommend-job__header {
  padding: 22px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8ea
}

.recommend-job__title {
  font-size: 18px;
  color: #252527
}

.recommend-job__caption {
  margin-top: 10px;
  font-size: 14px;
  color: #cdcdcf
}

.recommend-job__more {
  color: #6AA2E4
}

.recommend-job__detail-wrap {
  padding: 0 32px
}

.recommend-job__detail-wrap:hover {
  background-color: #F8F8FA
}

.recommend-job__detail-wrap:not(:last-of-type) .recommend-job__detail {
  border-bottom: 1px dashed #e8e8ea
}

.recommend-job__detail {
  height: 112px;
  display: flex;
  align-items: center
}

.recommend-job__detail--viewed .job__name {
  color: #A0A0A2
}

.recommend-job__detail .job {
  flex: 1 1 540px
}

.recommend-job__detail .job .secondary span:not(:last-of-type)::after {
  content: ' | '
}

.recommend-job__detail .job__name:visited {
  color: #A0A0A2
}

.recommend-job__detail .job__wage {
  margin-left: 16px;
  color: #fd8150
}

.recommend-job__detail .company {
  flex: 1 1 540px
}

.recommend-job__detail .company__name {
  color: #6AA2E4
}

.recommend-job__detail .company__label {
  height: 18px;
  margin-left: 5px
}

.recommend-job__detail .logo-wrap {
  display: inline-flex;
  flex: 0 0 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8ea
}

.recommend-job__detail .logo-wrap .company__logo {
  max-width: 100%;
  max-height: 100%
}

.recommend-job__detail .primary {
  display: flex;
  align-items: center;
  font-size: 17px;
  color: #252527
}

.recommend-job__detail .primary a {
  max-width: 300px;
  display: inline-block
}

.recommend-job__detail .secondary {
  margin-top: 16px;
  color: #a0a0a2
}

.recommend-job .recommend-job__list {
  margin-bottom: 50px
}

.recommend-job .recommend-job__list .recommend-job__detail-wrap {
  position: relative
}

.recommend-job .recommend-job__list .recommend-job__detail-wrap .xz_icon {
  width: 40px;
  position: absolute;
  left: 0;
  top: 0
}

.recommend-job .recommend-job__list .no-data-wrap {
  padding: 187px 0 225px;
  text-align: center
}

.recommend-job .recommend-job__list .btn {
  display: inline-block;
  width: 136px;
  line-height: 40px;
  background-color: #6AA2E4;
  border-radius: 4px;
  font-size: 16px;
  color: #fff
}

.recommend-job .recommend-job__list .tip {
  margin-top: 16px;
  color: #a0a0a2;
  font-size: 12px
}

.avatar-wrap {
  width: 88px;
  height: 88px
}

.avatar {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50%
}

.avatar:hover .avatar-upload {
  opacity: 1
}

.avatar img {
  width: 100%;
  height: 100%
}

.avatar .avatar-upload {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5) url(https://sxsimg.xiaoyuanzhao.com/static_sxs/dist/desktop/dist/client/img/head-upload.ff4986e.png) center/26px no-repeat;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s
}

.cropper-wrapper {
  height: 300px
}

.job-intention-dialog {
  color: #252527
}

.job-intention-dialog .el-dialog__header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09)
}

.job-intention-dialog .el-dialog__body {
  padding: 32px 145px 32px 0
}

.job-intention-dialog .title {
  text-align: center;
  font-size: 18px
}

.job-intention-dialog .el-form-item__label {
  font-size: 16px;
  text-align: right;
  -moz-text-align-last: right;
  text-align-last: right
}

.job-status-dialog {
  color: #252527
}

.job-status-dialog .el-dialog__header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09)
}

.job-status-dialog .el-dialog__body {
  padding: 32px 145px 32px 0
}

.job-status-dialog .title {
  text-align: center;
  font-size: 18px
}

.job-status-dialog .el-form-item__label {
  font-size: 16px;
  text-align: right;
  -moz-text-align-last: right;
  text-align-last: right
}

.resume-lan-type-btn {
  margin-right: 20px;
  padding: 5px 20px;
  background-color: #f8f8fa;
  color: #4c4c4e;
  cursor: pointer;
}

.active {
  background-color: #108ee9;
  color: #fff;
}

.title-btn {
  margin-left: 20px;
}

.tip {
  margin-top: 13px;
  color: rgba(0, 0, 0, 0.65);
}

.upload-file {
  display: inline-block
}

.footer {
  width: 100%;
  position: relative;
  z-index: 3;
  overflow: hidden;
  color: #000;
  padding-top: 30px;
  padding-bottom: 22px;
  line-height: 1.15;
}

.footer .footer_bgc {
  position: relative;
  background-color: #fafafa;
}

.footer .nav_bottom {
  position: relative;
  height: 204px;
  padding-top: 60px;
  letter-spacing: 0;
  font-size: 0;
  margin-bottom: 30px;
}

.footer .nav_bottom .nav_item {
  position: relative;
  display: inline-block;
  width: 245px;
  vertical-align: top;
}

.footer .nav_bottom .nav_r {
  width: 82px;
  text-align: right;
}

.footer .nav_bottom .nav_item .nav_til {
  position: relative;
  width: 100%;
  display: inline-block;
  font-size: 20px;
  color: #333;
}

.footer .nav_bottom .nav_item .a {
  width: 100%;
  position: relative;
  display: inline-block;
  font-size: 14px;
  padding-top: 14px;
}

.footer .nav_bottom .nav_item .a > a {
  display: inline-block;
  color: #666;
  text-decoration: none;
}

.footer .text_bottom {
  position: relative;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  color: #999;
  display: block;
}

.footer .text_bottom .text > span {
  position: relative;
  padding: 0 15px;
}

.footer .text_bottom .special {
  margin-bottom: 5px;
}

.footer .a_link {
  text-decoration: none;
  color: #666;
}

.footer .nav_bottom .nav_item .a > img {
  position: relative;
  display: inline-block;
  width: 72px;
  height: 44px;
}

.footer .nav_bottom .nav_item .a .mark {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #fff;
  left: -200px;
  top: -50px;
  background-repeat: no-repeat;
  background-position: center;
  display: none;
}

.footer .nav_bottom .nav_item .a .mark_gzh {
  left: -210px;
}

.footer .nav_bottom .nav_item .a .gzh {
  cursor: default;
}

.footer .nav_bottom .nav_item .a .khfw {
  cursor: pointer;
}

.footer .nav_bottom .nav_item .a .android:hover + .mark, .footer .nav_bottom .nav_item .a .ios:hover + .mark, .footer .nav_bottom .nav_item .a .gzh:hover + .mark {
  display: inline-block;
}

.footer .text_bottom .text > i {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.footer .text_bottom .text2 > i {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 16px;
  height: 19px;
  margin-right: 6px;
}

.container {
  /* width: 100%; */
  height: 100%;
  width: 1080px;
  margin: 0 auto;
  position: relative;
}

.marginRight8 {
  margin-right: 8px;
}

.tip_about {
  padding: 4px 0;
}

.tip_about p {
  box-sizing: border-box;
  color: #333;
  font-size: 14px;
  padding-left: 10px;
}

.fixed-wrap .fixed-box {
  width: 60px;
  position: fixed;
  right: 20px;
  bottom: 280px;
  margin: 0 auto;
  z-index: 1999
}

.fixed-wrap .fixed-box .box-item {
  border: 1px solid #eaeaea;
  border-top: 0;
  box-sizing: border-box;
  cursor: pointer
}

.fixed-wrap .fixed-box .box-item:first-of-type {
  border-top: 1px solid #eaeaea
}

.fixed-wrap .fixed-box .resume {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: none;
  background: #6aa2e4;
  border: 0 !important
}

.fixed-wrap .fixed-box .resume .resume_img img {
  width: 26px;
  height: 26px
}

.fixed-wrap .fixed-box .resume .resume_img .resume_text {
  font-size: 12px;
  color: #fff
}

.fixed-wrap .fixed-box .resume .text {
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: #999;
  display: none
}

.fixed-wrap .fixed-box .resume:hover {
  align-items: center
}

.fixed-wrap .fixed-box .resume:hover .resume_img {
  display: none
}

.fixed-wrap .fixed-box .resume:hover .text {
  color: #fff;
  display: block
}

.fixed-wrap .fixed-box .delivered {
  background: #fff;
  border: 1px solid #eaeaea !important
}

.fixed-wrap .fixed-box .delivered:hover .text {
  color: #999;
  display: block
}

.fixed-wrap .fixed-box .deliver {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff
}

.fixed-wrap .fixed-box .deliver .deliver_img {
  width: 26px;
  height: 26px
}

.fixed-wrap .fixed-box .deliver .deliver_img img {
  width: 100%;
  height: 100%
}

.fixed-wrap .fixed-box .deliver .text {
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: #999;
  display: none
}

.fixed-wrap .fixed-box .deliver:hover .deliver_img {
  display: none
}

.fixed-wrap .fixed-box .deliver:hover .text {
  display: block
}

.fixed-wrap .fixed-box #kefu {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff
}

.fixed-wrap .fixed-box #kefu .kefu_img {
  width: 26px;
  height: 26px
}

.fixed-wrap .fixed-box #kefu .kefu_img img {
  width: 100%;
  height: 100%
}

.fixed-wrap .fixed-box #kefu .text {
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: #999;
  display: none
}

.fixed-wrap .fixed-box #kefu:hover .kefu_img {
  display: none
}

.fixed-wrap .fixed-box #kefu:hover .text {
  display: block
}

.fixed-wrap .fixed-box #back_top {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-top: 0
}

.fixed-wrap .fixed-box #back_top .back_img {
  width: 26px;
  height: 26px
}

.fixed-wrap .fixed-box #back_top .back_img img {
  width: 100%;
  height: 100%
}

.fixed-wrap .fixed-box #back_top .text {
  width: 26px;
  height: 26px;
  line-height: 26px;
  color: #999;
  display: none
}

.fixed-wrap .fixed-box #back_top:hover .back_img {
  display: none
}

.fixed-wrap .fixed-box #back_top:hover .text {
  display: block
}

.fixed-wrap .adActivity {
  position: fixed;
  text-align: right;
  bottom: 10px;
  right: 101px;
  z-index: 4
}

</style>

